<template>
  <view class="container">
    <!-- 基础参数配置 -->
    <view class="config-section">
      <view class="section-title">基础参数</view>
      
	  <view class="form-item">
	    <text class="form-label">应用ID(agentId)</text>
	    <input 
	      class="form-input" 
	      placeholder="请输入应用ID" 
	      v-model="configData.AgentId"
	      required
	    />
	  </view>
      
      <view class="form-item">
        <text class="form-label">应用密钥(secret)</text>
        <input 
          class="form-input" 
          placeholder="请输入应用密钥" 
          v-model="configData.Secret"
          required
        />
      </view>
      
    </view>

    <!-- 展示类型选择 -->
    <view class="config-section">
      <view class="section-title">展示类型</view>
      <picker 
        class="picker" 
        @change="onDisplayTypeChange"
        :value="displayTypeIndex"
        :range="displayTypes"
      >
        <view class="picker-view">
          {{ displayTypes[displayTypeIndex] }}
        </view>
      </picker>
    </view>

    <!-- 关键数据型配置 (Type=1) -->
    <view class="config-section" v-if="configData.Type === 1">
      <view class="section-title">关键数据型配置</view>
      
      <view class="section-desc">每项包含键、数据值、跳转链接和页面路径</view>
      
      <view class="list-items">
        <view class="data-item" v-for="(item, index) in content.items" :key="index">
          <view class="item-header">
            <text>数据项 {{ index + 1 }}</text>
            <button 
              class="remove-btn" 
              @click="removeItem(index)"
              v-if="content.items.length > 1"
            >
              <text class="iconfont icon-times"></text>
            </button>
          </view>
          
          <view class="form-item">
            <text class="form-label">键(key)</text>
            <input 
              class="form-input" 
              placeholder="请输入键名，如：待审批" 
              v-model="content.items[index].key"
              required
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">数据值(data)</text>
            <input 
              class="form-input" 
              placeholder="请输入数据值" 
              v-model="content.items[index].data"
              required
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">跳转链接(jump_url)</text>
            <input 
              class="form-input" 
              placeholder="请输入跳转链接" 
              v-model="content.items[index].jump_url"
              required
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">页面路径(pagepath)</text>
            <input 
              class="form-input" 
              placeholder="请输入页面路径，如：pages/index" 
              v-model="content.items[index].pagepath"
              required
            />
          </view>
        </view>
      </view>
      
      <button class="add-btn" @click="addDataItem">
        <text class="iconfont icon-plus mr-1"></text> 添加数据项
      </button>
    </view>

    <!-- 图片型配置 (Type=2) -->
    <view class="config-section" v-if="configData.Type === 2">
      <view class="section-title">图片型配置</view>
      
      <view class="form-item">
        <text class="form-label">图片URL(url)</text>
        <input 
          class="form-input" 
          placeholder="请输入图片URL" 
          v-model="content.url"
          required
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">跳转链接(jump_url)</text>
        <input 
          class="form-input" 
          placeholder="请输入跳转链接" 
          v-model="content.jump_url"
          required
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">页面路径(pagepath)</text>
        <input 
          class="form-input" 
          placeholder="请输入页面路径，如：pages/index" 
          v-model="content.pagepath"
          required
        />
      </view>
    </view>

    <!-- 列表型配置 (Type=3) -->
    <view class="config-section" v-if="configData.Type === 3">
      <view class="section-title">列表型配置</view>
      
      <view class="section-desc">每项包含标题、跳转链接和页面路径</view>
      
      <view class="list-items">
        <view class="list-item" v-for="(item, index) in content.items" :key="index">
          <view class="item-header">
            <text>列表项 {{ index + 1 }}</text>
            <button 
              class="remove-btn" 
              @click="removeItem(index)"
              v-if="content.items.length > 1"
            >
              <text class="iconfont icon-times"></text>
            </button>
          </view>
          
          <view class="form-item">
            <text class="form-label">标题(title)</text>
            <input 
              class="form-input" 
              placeholder="请输入列表项标题" 
              v-model="content.items[index].title"
              required
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">跳转链接(jump_url)</text>
            <input 
              class="form-input" 
              placeholder="请输入跳转链接" 
              v-model="content.items[index].jump_url"
              required
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">页面路径(pagepath)</text>
            <input 
              class="form-input" 
              placeholder="请输入页面路径，如：pages/index" 
              v-model="content.items[index].pagepath"
              required
            />
          </view>
        </view>
      </view>
      
      <button class="add-btn" @click="addListItem">
        <text class="iconfont icon-plus mr-1"></text> 添加列表项
      </button>
    </view>

    <!-- WebView型配置 (Type=4) -->
    <view class="config-section" v-if="configData.Type === 4">
      <view class="section-title">WebView型配置</view>
      
      <view class="form-item">
        <text class="form-label">页面标题(title)</text>
        <input 
          class="form-input" 
          placeholder="请输入页面标题" 
          v-model="content.title"
          required
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">网页URL(url)</text>
        <input 
          class="form-input" 
          placeholder="请输入网页URL" 
          v-model="content.url"
          required
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">跳转链接(jump_url)</text>
        <input 
          class="form-input" 
          placeholder="请输入跳转链接" 
          v-model="content.jump_url"
          required
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">页面路径(pagepath)</text>
        <input 
          class="form-input" 
          placeholder="请输入页面路径，如：pages/index" 
          v-model="content.pagepath"
          required
        />
      </view>
    </view>

    <!-- 提交按钮 -->
    <button class="submit-btn" @click="submitConfig">提交配置</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 配置数据，与后端QywxUpdateDetail类对应
      configData: {
        CorpId: 'ww41ce2a97523f4d1a',
		AgentId:'',
        Secret: '',
        Type: 1, // 默认1-关键数据型
        Content: null
      },
      
      // 展示类型选项，对应Type的1-4
      displayTypes: ['关键数据型', '图片型', '列表型', 'WebView型'],
      displayTypeIndex: 0,
      
      // 内容数据，会赋值给configData.Content
      content: {
        // 关键数据型和列表型共用的items结构
        items: [],
        // 图片型和WebView型的字段
        url: '',
        title: '',
        jump_url: '',
        pagepath: ''
      }
    };
  },
  onLoad() {
    // 初始化默认类型的数据结构
    this.resetContentData();
  },
  methods: {
    // 切换展示类型
    onDisplayTypeChange(e) {
      const index = e.detail.value;
      this.displayTypeIndex = index;
      // 类型对应：1-关键数据2-图片3-列表4-webview
      this.configData.Type = index + 1;
      
      // 重置内容数据
      this.resetContentData();
    },
    
    // 重置内容数据
    resetContentData() {
      this.content = {
        items: [],
        url: '',
        title: '',
        jump_url: '',
        pagepath: ''
      };
      
      // 根据类型初始化不同的结构
      switch(this.configData.Type) {
        case 1: // 关键数据型
          this.content.items = [{
            key: '',
            data: '',
            jump_url: '',
            pagepath: ''
          }];
          break;
        case 3: // 列表型
          this.content.items = [{
            title: '',
            jump_url: '',
            pagepath: ''
          }];
          break;
      }
    },
    
    // 添加列表项
    addListItem() {
      this.content.items.push({
        title: '',
        jump_url: '',
        pagepath: ''
      });
    },
    
    // 添加数据项
    addDataItem() {
      this.content.items.push({
        key: '',
        data: '',
        jump_url: '',
        pagepath: ''
      });
    },
    
    // 移除项
    removeItem(index) {
      this.content.items.splice(index, 1);
    },
    
    // 提交配置
    submitConfig() {
      let isValid = true;
      const errorFields = [];
      
      // 验证基础参数
      if (!this.configData.CorpId.trim()) {
        isValid = false;
        errorFields.push('企业ID');
      }
      if (!this.configData.Secret.trim()) {
        isValid = false;
        errorFields.push('应用密钥');
      }
      
      // 将content赋值给Content
      this.configData.Content = this.content;
      
      // 根据类型验证对应的内容
      switch(this.configData.Type) {
        case 1: // 关键数据型
          if (!this.content.items || this.content.items.length === 0) {
            isValid = false;
            errorFields.push('至少需要一项数据');
          } else {
            this.content.items.forEach((item, index) => {
              if (!item.key.trim()) {
                isValid = false;
                errorFields.push(`数据项 ${index + 1} 的键名`);
              }
              if (!item.data.toString().trim()) {
                isValid = false;
                errorFields.push(`数据项 ${index + 1} 的数据值`);
              }
              if (!item.jump_url.trim()) {
                isValid = false;
                errorFields.push(`数据项 ${index + 1} 的跳转链接`);
              }
              if (!item.pagepath.trim()) {
                isValid = false;
                errorFields.push(`数据项 ${index + 1} 的页面路径`);
              }
            });
          }
          break;
          
        case 2: // 图片型
          if (!this.content.url.trim()) {
            isValid = false;
            errorFields.push('图片URL');
          }
          if (!this.content.jump_url.trim()) {
            isValid = false;
            errorFields.push('跳转链接');
          }
          if (!this.content.pagepath.trim()) {
            isValid = false;
            errorFields.push('页面路径');
          }
          break;
          
        case 3: // 列表型
          if (!this.content.items || this.content.items.length === 0) {
            isValid = false;
            errorFields.push('至少需要一项列表内容');
          } else {
            this.content.items.forEach((item, index) => {
              if (!item.title.trim()) {
                isValid = false;
                errorFields.push(`列表项 ${index + 1} 的标题`);
              }
              if (!item.jump_url.trim()) {
                isValid = false;
                errorFields.push(`列表项 ${index + 1} 的跳转链接`);
              }
              if (!item.pagepath.trim()) {
                isValid = false;
                errorFields.push(`列表项 ${index + 1} 的页面路径`);
              }
            });
          }
          break;
          
        case 4: // WebView型
          if (!this.content.title.trim()) {
            isValid = false;
            errorFields.push('页面标题');
          }
          if (!this.content.url.trim()) {
            isValid = false;
            errorFields.push('网页URL');
          }
          if (!this.content.jump_url.trim()) {
            isValid = false;
            errorFields.push('跳转链接');
          }
          if (!this.content.pagepath.trim()) {
            isValid = false;
            errorFields.push('页面路径');
          }
          break;
      }
      
      if (isValid) {
        // 这里可以添加实际的提交逻辑，比如调用API
        console.log('提交的配置数据:', JSON.stringify(this.configData, null, 2));
        
        // 示例：调用uni.request提交数据
        /*
        uni.request({
          url: '你的后端API地址',
          method: 'POST',
          data: this.configData,
          success: (res) => {
            if (res.data.success) {
              uni.showToast({
                title: '配置提交成功！',
                icon: 'success'
              });
            } else {
              uni.showToast({
                title: '提交失败: ' + res.data.message,
                icon: 'none'
              });
            }
          },
          fail: (err) => {
            uni.showToast({
              title: '网络错误',
              icon: 'none'
            });
            console.error(err);
          }
        });
        */
        
        uni.showToast({
          title: '配置提交成功！',
          icon: 'success'
        });
      } else {
        uni.showModal({
          title: '输入错误',
          content: `请完善以下必填项：\n${errorFields.join('\n')}`,
          showCancel: false
        });
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 16px;
  background-color: #f5f7fa;
  font-family: 'Noto Sans SC', sans-serif;
  color: #333;
  min-height: 100vh;
}

.config-section {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #1f2937;
}

.section-desc {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 16px;
  padding-left: 2px;
}

.form-item {
  margin-bottom: 12px;
}

.form-label {
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
  color: #4b5563;
}

.form-input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
}

.form-input:focus {
  border-color: #3b82f6;
  outline: none;
}

.submit-btn {
  background-color: #3b82f6;
  color: white;
  height: 45px;
  width: 90%;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  margin: 20px auto;
  display: block;
  border: none;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0 8px;
  font-weight: 500;
}

.list-items {
  margin-bottom: 8px;
}

.data-item, .list-item {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 12px;
}

.remove-btn {
  color: #ef4444;
  background: none;
  border: none;
  font-size: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-btn {
  color: #3b82f6;
  background: none;
  border: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding: 0;
  margin-top: 8px;
}

.picker {
  width: 100%;
  height: 40px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 14px;
  background-color: white;
  display: flex;
  align-items: center;
}

.picker-view {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-times:before {
  content: "\e61a";
}

.icon-plus:before {
  content: "\e61d";
}

.mr-1 {
  margin-right: 4px;
}
</style>
